<template>
    <div class="register">
        <c-wrap title="用户注册" :bgColor="bgColor">
            <div class="card">
                <mt-field label="手机号码" placeholder="请填写手机号码" type="tel" v-model="user.name"></mt-field>
                <mt-field label="验证码" placeholder="6位验证码" readonly disableClear v-model="user.code">
                    <mt-button plain v-if="!showCount"
                               style="height: 20px;font-size: 14px;margin-right: 40px;color:#2699FB;"
                               @click="clickCode">点击获取
                    </mt-button>
                    <mt-button v-if="showCount" plain
                               style="height: 20px;font-size: 14px;margin-right: 40px;color: #707070;"
                    >{{count}}s
                    </mt-button>
                </mt-field>
                <mt-field label="登录密码" placeholder="6-20位字母数字组合" type="password" v-model="user.password"></mt-field>
            </div>
            <p style="text-align: left;color: rgba(255,255,255,.8);margin: 0;">
                <mt-button plain @click="agree=!agree">
                    <icon :clazz="agree?'icon-zhengkuangduihao':'icon-zhengkuang'"
                          style="width: 16px;height: 16px;vertical-align: middle"></icon>
                </mt-button>
                <span style="font-size: 12px;color: RGBA(112, 112, 112, 1);">
                        您已阅读并同意<router-link to="/registerProtocol"
                                            style="padding-left: 5px;color: rgba(0, 0, 0, 0.87);">注册协议</router-link>
                    </span>
            </p>
            <mt-button type="primary" style="height: 41px;" @click="clickRegister">注册</mt-button>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'

    export default {
        components: {CWrap},
        data() {
            return {
                agree: true,
                user: {
                    name: '',
                    code: '',
                    password: ''
                },
                showCount: false,
                count: 150,
                bgColor: '#E8E8E8'
            }
        },
        watch: {
            'user.name': function (val) {
                if (this.user.code) {
                    this.user.code = '';
                }
                if (this.user.password) {
                    this.user.password = '';
                }
            }
        },
        methods: {
            clickCode() {
                if (!this.user.name) {
                    this.$toast({
                        position: 'top',
                        message: '请先填写手机号码'
                    });
                    return
                }
                if (!app.util.validate('telephone', this.user.name)) {
                    this.$toast({
                        position: 'top',
                        message: '请正确填写手机号码'
                    });
                    return
                }
                app.ajax.get(app.config.setting.serverMobile + app.config.api.mobile.code + this.user.name, {}, (res) => {
                    Object.assign(this.user, {code: res.data});
                    this.showCount = true;
                    this.countDown();
                });
            },
            clickRegister() {
                if (!this.agree) {
                    this.$toast({
                        position: 'top',
                        message: '请阅读并同意注册协议'
                    });
                    return;
                }
                if (!this.user.name || !app.util.validate('telephone', this.user.name)) {
                    this.$toast({
                        position: 'top',
                        message: '请正确填写手机号码'
                    });
                    return;
                }
                if (!this.user.code) {
                    this.$toast({
                        position: 'top',
                        message: '验证码不得为空'
                    });
                    return;
                }
                if (!this.user.password || !app.util.validate('password', this.user.password)) {
                    this.$toast({
                        position: 'top',
                        message: '密码输入错误！'
                    });
                    return;
                }
                app.ajax.post(app.config.setting.serverMobile + app.config.api.mobile.logon, {
                    name: this.user.name,
                    code: this.user.code,
                    password: app.util.md5(this.user.password)
                }, (res) => {
                    if (res.s === 0) {
                        setTimeout(() => {
                            this.$router.push({name: 'login', params: {name: this.user.name}})
                        }, 2000)
                    }
                });
            },
            countDown() {
                this.count = 150;
                let countInterval = setInterval(() => {
                    this.count--;
                    if (this.count === 0) {
                        clearInterval(countInterval);
                        this.showCount = false;
                    }
                }, 1000)
            }
        }
    }
</script>
<style>
    .register .mint-cell-wrapper {
        padding: 0 20px;
    }

    .register .mint-button {
        height: 35px;
    }

    .register:after {
        content: "";
        background: inherit;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        filter: blur(3px);
    }

    .register .c-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        z-index: 11;
        background-color: rgba(112, 112, 112, 0.4);
    }

    .register a:-webkit-any-link {
        color: orangered;
    }

    .register .card {
        width: 100%;
        margin: 0;
        background-color: #fff;
    }

    .register input {
        background-color: inherit;
    }

    .register .mint-cell {
        background: inherit;
    }

    .register .mint-cell-wrapper {
        background-position: bottom left;
        background-origin: padding-box;
    }

    .register .mint-cell-title {
        text-align: justify;
        text-justify: distribute-all-lines; /*ie6-8*/
        text-align-last: justify; /* ie9*/
        -moz-text-align-last: justify; /*ff*/
        -webkit-text-align-last: justify; /*chrome 20+*/
        margin-right: 5%;
    }

    .register .mint-field .mint-cell-value {
        width: 70%;
        margin-right: 0;
    }

    .register .mint-field-core {
        /*color: rgba(255, 255, 255, .8);*/
    }

    .register .card .mint-button--primary {
        width: 100%;
        margin-top: 0;
    }

    .register .card p .mint-button {
        height: 20px;
    }

    .register .card p .mint-button--normal {
        padding: 0 5px 0 0;
    }

    .register .mint-field-other .mint-button--normal {
        padding: 0;
    }
</style>
